<template>
  <el-header>
    <el-row>
      <el-col :span="1">
        <el-icon v-if="!isCollapse">
          <d-arrow-left @click="handleCollapse(false)"/>
        </el-icon>
        <el-icon v-else>
          <d-arrow-right @click="handleCollapse(true)"/>
        </el-icon>
      </el-col>

      <el-col :span="10">
        <mine-breadcrumb></mine-breadcrumb>
      </el-col>

      <el-col :span="4" :offset="9">
        <el-dropdown>
          <span class="el-dropdown-link">
            <el-avatar class="header-avatar" :size="50" :src="accountInfo.avatar"></el-avatar>
            <span :style="{marginLeft: '10px'}">{{ accountInfo.nickName }}</span>
          </span>
          <template #dropdown>
            <el-row :style="{width:'220px',height:'120px',padding:'10px'}">
              <el-row class="header-avatar">
                <el-avatar :size="50" :src="accountInfo.avatar"></el-avatar>
                <span :style="{fontSize:'16px',marginLeft:'10px'}">{{ accountInfo.nickName }}</span>
              </el-row>
              <el-row>
                <el-button @click="handleToProfile">个人中心</el-button>
                <el-button @click="handleLogout">退出登录</el-button>
              </el-row>
            </el-row>
          </template>
        </el-dropdown>
      </el-col>
    </el-row>

  </el-header>
</template>

<script>
import {DArrowLeft, DArrowRight} from '@element-plus/icons-vue'
import {logout} from "@/api/login";
import {useStore} from 'vuex'
import {useRouter} from 'vue-router'
import MineBreadcrumb from "@/components/mine-breadcrumb";

import {ref, getCurrentInstance} from "vue";

export default {
  name: "mine-header",
  components: {
    MineBreadcrumb,
    DArrowLeft,
    DArrowRight
  },
  setup() {
    const {proxy} = getCurrentInstance()
    const isCollapse = ref(false)
    const store = useStore()
    const handleCollapse = (collapse) => {
      isCollapse.value = !collapse;
      proxy.$bus.emit('handleCollapseHeader', isCollapse.value)
    }
    const router = useRouter();
    const accountInfo = store.state.account.accountInfo
    const per = store.state.account.permissions
    const handleLogout = () => {
      let token = store.state.account.token
      logout(accountInfo.id, token).then(res => {
        if (res.success) {
          router.push("/login")
        }
      })
    }
    const handleToProfile = () => {
      router.push("/sys/profile")
    }
    return {
      isCollapse,
      accountInfo,
      handleCollapse,
      handleLogout,
      handleToProfile
    }
  }
}
</script>

<style scoped>
.el-header {
  color: #333;
  line-height: 60px;
  vertical-align: middle;
}

.header-breadcrumb {
  line-height: 60px;
  vertical-align: middle;
}

.header-avatar {
  vertical-align: middle;
  line-height: 60px;
}
</style>
